菜菜菜的 Vue 30天 - Day19

lifecycle

今天要介紹的是生命週期(lifecycle)，在 Vue 裡面算是挺重要的部分，接下來就來一一講解～

在 Vue 實例以及組件(component) 的建立、掛載、更新再到消滅這些過程我們會稱為是生命週期。

我們先來看一下下面這張圖：

這張圖是 Vue 官網文件提供 Vue 完整的生命週期流程圖，我們在每個不同生命週期的過程會執行函式，這函式我們就會稱為生命週期函式(lifecycle hooks)，也就是圖中紅色的部分。

那生命週期主要會分為 4 個階段：

1. 創建(created)
2. 掛載(mounted)
3. 更新(updated)
4. 卸載(destroyed)

這四個生命週期各自也會分為執行前及完成後 2 個階段，所以全部就會有 8個生命週期函式。

我們一一的來看一下整個生命週期的流程吧～

1. 首先最一開始就是 Vue 實例 / 組件(component)的創建
2. 創建完之後會先執行初始化 Events 及 lifecycle
3. 初始化後就會觸發第一個生命週期函式 beforeCreate
4. 接下來在初始化 data, computed...等方法
5. 在上面完成初始化後觸發 created，這時才 Vue 實例才算擁有前幾章介紹的方法。
6. 接下來會判斷是否擁有 el 這個屬性，如果沒有的話會等到執行vm.$mount掛載之後才會執行下一步
7. 等到有掛載 el 之後會判斷是否有使用 template，如果有就照 template 做渲染，如果沒有就會依據 el 所掛載的 HTML 元素作渲染
8. 確定使用哪一種方式渲染後就會觸發 beforeMount，這時候還沒有真正掛載
9. 接下來就會將 el 進行真正的掛載
10. 完成掛載後就會觸發 mounted
11. 再來完成掛載之後如果渲染的資料有更動的話會先觸發 beforeUpdate
12. 接下來就會變更畫面的 DOM，變更後就會觸發 updated，之後就會回到 mounted 的狀態
13. 當我們要摧毀 Vue 時就會觸發 beforeDestroy
14. 接下來就會開始將所有的事件監聽器拿掉
15. 最後觸發 Destroyed 完成後就會真正地消失了